import '@wangeditor/editor/dist/css/style.css' // 引入 css

import React, { useState } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'

function WEditor({ onChange }) {

  let [editor, setEditor] = useState(null);
  let [html, setHtml] = useState(null);

  const toolbarConfig = {}
  const editorConfig = {
    placeholder: "请输入内容..."
  }
  return (
    <>
      <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          style={{ borderBottom: '1px solid #ccc' }}
        ></Toolbar>
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={(editor) => {
            // getText()获取纯文本，getHtml()获取带html
            setHtml(editor.getHtml())
            // console.log(editor.getText(), editor.getHtml());
            // 调用onChange，获取返回存文本和html文本
            onChange && onChange({
              text: editor.getText(),
              html: editor.getHtml()
            })
          }}
          style={{ height: '300px', overflowY: 'hidden' }}
        ></Editor>
      </div>
    </>
  );
}

export default WEditor;